<template>
  <div class="post-detail-content">
    <div class="post-detail-header">
      <div class="post-detail-header-title">
        {{postDetailInfo.title}}
      </div>
      <div class="post-detail-header-info mt10">
        <span>发布于: {{changeTimeStamp(postDetailInfo.time)}}</span>
        <span>标签: </span>
        <span v-for="(item, index) in postDetailInfo.tags" :key="index"> /{{item}} </span>
      </div>
    </div>
    <div class="post-detail-content mt50 ql-editor" v-html="htmlspecialchars_decode(postDetailInfo.contents)"></div>

  </div>
</template>

<script>
import { timeStampChange } from '@/components/common/commonMethonds'
export default {
  name: 'post-detail',
  props: ['postInfo'],
  mounted() {
    this.tidyInfo()
  },
  data() {
    return {
      // 博文详情数据
      postDetailInfo: {}
    }
  },
  methods: {
    // 初始化整理博文详情数据
    tidyInfo() {
      this.postDetailInfo = this.postInfo
    },
    changeTimeStamp(time) {
      return timeStampChange(parseInt(time))
    },
    // 富文本解密
    htmlspecialchars_decode(str){
      if(!str) {
        return
      }
     let s = "";
      if(str.length == 0) return "";
      s = str.replace(/&amp;/g,"&");
      s = s.replace(/&lt;/g,"<");
      s = s.replace(/&gt;/g,">");
      s = s.replace(/&nbsp;/g," ");
      s = s.replace(/&#39;/g,"\'");
      s = s.replace(/&quot;/g,"\"");
      return s;
    }
  }
}
</script>

<style lang="less" scoped>

  .post-detail-content{
    .post-detail-header{
      width: 100%;
      .post-detail-header-title{
        font-size: 18px;
        text-align: center
      }
      .post-detail-header-info{
        font-weight: 300;
        color: #999999;
        font-size: 13px;
        text-decoration: none;
        text-align: center;
      }
    }
    pre.ql-syntax{
      background-color: #23241f;
      color: #f8f8f2;
      overflow: visible;
      white-space: pre-wrap;
      margin-bottom: 5px;
      margin-top: 5px;
      padding: 5px 10px;
      border-radius: 3px;
    }
  }
</style>


